/**
*@description CRM运营》回柜
*@author daycool
*/
import React, { Component, PropTypes } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import MainLayout from '../components/MainLayout/MainLayout';
import BarChart from '../components/CRM/BarChart';
import MyRangePicker from '../components/CRM/MyRangePicker';

import moment from 'moment';
import styles from './HomePage.less';
import {Card, Icon, Tooltip, Table, Row, Col, Button, DatePicker} from 'antd';
import toExcel from '../utils/toExcel';
import downImg from '../utils/downImg';

const {RangePicker,MonthPicker} = DatePicker;
import utils from '../utils/utils';
const {startDate, endDate} = utils.getDefaultDateRange();
const dateFormat = 'YYYY-MM';
const columns = [
  { title: '产品大类', dataIndex: 'name', key: 'name' },
  { title: '购买会员数', dataIndex: 'value1', key: '1'},
  { title: '销量', dataIndex: 'value2', key: '2' },
];

const areaColums = [
  {title: '指标', dataIndex: 'name', key: 'name', fixed: 'left', width: 190,},
  { title: '北京', dataIndex: 'value1', key: '1'},
  { title: '成都', dataIndex: 'value2', key: '2' },
  { title: '大连', dataIndex: 'value3', key: '3' },
  { title: '广州', dataIndex: 'value4', key: '4' },
  { title: '杭州', dataIndex: 'value5', key: '5' },
  { title: '昆明', dataIndex: 'value6', key: '6' },
  { title: '南京', dataIndex: 'value7', key: '7' },
  { title: '上海', dataIndex: 'value8', key: '8' },
  { title: '沈阳', dataIndex: 'value9', key: '9', fixed: 'right', width: 80 },
];

const data = [{
  key: '1',
  name: '销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '2',
  name: '会员销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '3',
  name: '新会员销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '4',
  name: '老会员销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '5',
  name: '首单350以上的新会员的销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}];


class CRMSale extends Component {
  constructor(props) {
      super(props);
  }
  state = {
    productStartDate: startDate,
    productEndDate: endDate,
    monthProductStartDate: startDate,
    monthProductEndDate: endDate,
    areaProductStartDate: startDate,
    areaProductEndDate: endDate,
    curMonthPurMember: endDate,
    curMonthRepPurMember: endDate
  }
  componentWillMount() {
    this.initData();
  };
  onChange = (type, e) => {
    var currState = {
      [type]: e.target.value,
    };
    this.setState(currState);
  }
  // 获取数据
  fetchData(type, params){
    this.props.dispatch({
      type: type,
      payload: params
    });
  };
  fetchProductData(){
    this.fetchData('CRMdata/product', {
      startMonth: this.state.productStartDate,
      endMonth: this.state.productEndDate,
      type: this.state.monthMemberType,
    });
  }
  fetchMonthProductData(){
    this.fetchData('CRMdata/monthProduct', {
      startMonth: this.state.monthProductStartDate,
      endMonth: this.state.monthProductEndDate,
      type: this.state.areaMemberType,
    });
  }
  fetchAreaProductData(){
    this.fetchData('CRMdata/areaProduct', {
      startMonth: this.state.areaProductStartDate,
      endMonth: this.state.areaProductEndDate,
    });
  }
  fetchCurMonthPurMemberData(){
    this.fetchData('CRMdata/CurMonthPurMember', {
      curMonth: this.state.curMonthPurMember
    });
  }
  fetchCurMonthRepPurMemberData(){
    this.fetchData('CRMdata/CurMonthRepPurMember', {
      curMonth: this.state.curMonthRepPurMember
    });
  }
  initData(){
    this.fetchProductData();
    this.fetchMonthProductData();
    this.fetchAreaProductData();
    this.fetchCurMonthPurMemberData();
    this.fetchCurMonthRepPurMemberData();
  };
  onDateChange(type, date, dateString) {
    type = type.replace('Type', '');
    let currState = {
      [type + 'StartDate']: dateString[0],
      [type + 'EndDate']: dateString[1],
    };
    this.setState(currState);
  };
  onCurMonthPurMemberChange(date, dateString) {
    this.setState({
      curMonthPurMember: dateString
    });
  };
  onCurMonthRepPurMemberChange(date, dateString) {
    this.setState({
      curMonthRepPurMember: dateString
    });
  };
  productOk(){
    this.fetchProductData();
  };
  productDownload(){
    this.exExcel(this.props.CRMdata.productDownloadData, '产品大类市场表现');
  };
  monthProductOk(){
    this.fetchMonthProductData();
  };
  monthProductDownload(){
    this.exExcel(this.props.CRMdata.monthProductDownloadData, '月度产品小类市场表现');
  };
  areaProductOk(){
    this.fetchAreaProductData();
  };
  areaProductDownload(){
    this.exExcel(this.props.CRMdata.areaProductDownloadData, '地区产品小类市场表现');
  };
  CurMonthPurMemberOk(){
    this.fetchCurMonthPurMemberData();
  };
  CurMonthPurMemberDownload(){
    this.exExcel(this.props.CRMdata.CurMonthPurMemberDownloadData, '当月产品购买会员');
  };
  CurMonthRepPurMemberOk(){
    this.fetchCurMonthRepPurMemberData();
  };
  CurMonthRepPurMemberDownload(){
    this.exExcel(this.props.CRMdata.CurMonthRepPurMemberDownloadData, '产品复购');
  };
  exExcel(downloadData, title){
      toExcel(downloadData.header, title, downloadData.data);
  };
  render(){
    const tips1 = (<Row>
        <Col span={6}>产品大类市场表现</Col>
        <Col span={18} style={{textAlign:"right"}}>
          <MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onDateChange.bind(this, 'product')} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/>
          <Button type="primary" onClick={this.productOk.bind(this)} className= {styles.searchOk}>确定</Button>
          <Button type="primary" onClick={this.productDownload.bind(this)} className= {styles.searchOk}>下载数据</Button>
        </Col>
      </Row>);
    const tips2 = (<Row>
        <Col span={6}>月度产品小类市场表现</Col>
        <Col span={18} style={{textAlign:"right"}}>
          <MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onDateChange.bind(this, 'monthProduct')} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/>
          <Button type="primary" onClick={this.monthProductOk.bind(this)} className= {styles.searchOk}>确定</Button>
          <Button type="primary" onClick={this.monthProductDownload.bind(this)} className= {styles.searchOk}>下载数据</Button>
        </Col>
      </Row>);
    const tips3 = (<Row>
        <Col span={6}>地区产品小类市场表现</Col>
        <Col span={18} style={{textAlign:"right"}}>
          <MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onDateChange.bind(this, 'areaProduct')} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/>
          <Button type="primary" onClick={this.areaProductOk.bind(this)} className= {styles.searchOk}>确定</Button>
          <Button type="primary" onClick={this.areaProductDownload.bind(this)} className= {styles.searchOk}>下载数据</Button>
        </Col>
      </Row>);
    const tips4 = (<Row>
      <Col span={6}>当月产品购买会员</Col>
      <Col span={18} style={{textAlign:"right"}}>
        <MonthPicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onCurMonthPurMemberChange.bind(this)} defaultValue={moment(endDate)} format={dateFormat}/>
        <Button type="primary" onClick={this.CurMonthPurMemberOk.bind(this)} className= {styles.searchOk}>确定</Button>
        <Button type="primary" onClick={this.CurMonthPurMemberDownload.bind(this)} className= {styles.searchOk}>下载数据</Button>
      </Col>
    </Row>);
    const tips5 = (<Row>
      <Col span={6}>产品复购</Col>
      <Col span={18} style={{textAlign:"right"}}>
        <MonthPicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onCurMonthRepPurMemberChange.bind(this)} defaultValue={moment(endDate)} format={dateFormat}/>
        <Button type="primary" onClick={this.CurMonthRepPurMemberOk.bind(this)} className= {styles.searchOk}>确定</Button>
        <Button type="primary" onClick={this.CurMonthRepPurMemberDownload.bind(this)} className= {styles.searchOk}>下载数据</Button>
      </Col>
    </Row>);
  return (
    <MainLayout isShowLeft="showCRM">
        <div style={{marginTop:29}}>
                <Card title={tips1} style={{minHeight:300}}>
                    <Row>
                        <Col span={14}>
                            <BarChart data={this.props.CRMdata.productChartData} loading={this.props.CRMdata.productLoading} seriesName="月度销售额" width={'100%'} height={400} />
                        </Col>
                        <Col span={10}>
                            <Table pagination={false} style={{marginRight: 20}} columns={this.props.CRMdata.productData.columns} dataSource={this.props.CRMdata.productData.data} scroll={{y: 500}}/>
                        </Col>
                    </Row>
                </Card>
                <Card title={tips2} style={{minHeight:300}}>
                      <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.monthProductData.columns} dataSource={this.props.CRMdata.monthProductData.data} scroll={{ x: 1300 }} />
                </Card>
                <Card title={tips3} style={{minHeight:300}}>
                      <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.areaProductData.columns} dataSource={this.props.CRMdata.areaProductData.data} scroll={{ x: 1300 }} />
                </Card>
                <Card title={tips4} style={{minHeight:300}}>
                  <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.CurMonthPurMemberData.columns} dataSource={this.props.CRMdata.CurMonthPurMemberData.data} scroll={{x: 500 }} />
                </Card>
                <Card title={tips5} style={{minHeight:300}}>
                  <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.CurMonthRepPurMemberData.columns} dataSource={this.props.CRMdata.CurMonthRepPurMemberData.data} scroll={{x: 500  }} />
                </Card>
        </div>
    </MainLayout>
  );
  }
};

CRMSale.propTypes = {
};

function mapStateToProps({ CRMdata }) {
  return {
    CRMdata: {...CRMdata},
  };
}

export default connect(mapStateToProps)(CRMSale);
